﻿<template>
  <div class="residents-container">
    <el-dialog
      v-model="dialogObj.isDialogVisible"
      :title="dialogObj.editResidentsTitle"
      width="600px"
      top="10vh"
      modal-class="res-add"
    >
      <div class="res-add-content">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          label-width="170px"
          :rules="rules"
        >
          <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
              <el-form-item label="机构名称：" prop="institution">
                <el-input
                  v-model="ruleForm.institution"
                  placeholder="请输入机构名称"
                  style="width: 300px"
                  maxlength="30"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
              <el-form-item label="医生姓名：" prop="name">
                <el-input
                  v-model="ruleForm.name"
                  placeholder="请输入医生姓名"
                  style="width: 300px"
                  maxlength="10"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
              <el-form-item label="检查医生：" prop="followName">
                <el-input
                  v-model="ruleForm.followName"
                  placeholder="请输入检查医生"
                  style="width: 300px"
                  maxlength="30"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog" size="large">取 消</el-button>
          <el-button type="primary" @click="onSubmit" size="large"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
// import { parseISO } from "date-fns";
import http from "@/utils/request";
import { ElMessage } from "element-plus";
export default {
  props: {
    dialogObj: {
      type: Object,
      default: () => ({
        isDialogVisible: false,
        editResidentsTitle: "",
        DialogDate: {},
      }),
    },
  },
  data() {
    //姓名
    const validname = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入医生姓名"));
      } else {
        callback();
      }
    };

    const validoctor = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入随访医生"));
      } else {
        callback();
      }
    };
    const validInstitution = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入机构名称"));
      } else {
        callback();
      }
    };
    return {
      isshow: true,
      inspectionTime: new Date(),
      // 基本信息
      ruleForm: {
        id: "",
        name: "",
        followName: "",
        institution: "",
      },
      rules: {
        name: [{ required: true, validator: validname, trigger: "change" }],
        followName: [
          { required: true, validator: validoctor, trigger: "change" },
        ],
        institution: [
          { required: true, validator: validInstitution, trigger: "change" },
        ],
      },
    };
  },

  methods: {
    //关闭弹窗
    closeDialog() {
      this.dialogObj.isDialogVisible = false;
    },
    //提交
    onSubmit() {
      if (this.dialogObj.editResidentsTitle == "新增检查医生") {
        this.$refs.ruleFormRef.validate((valid) => {
          if (valid) {
            http
              .post("/doctor/insertFollow", { ...this.ruleForm })
              .then((res) => {
                if (res.code == 200) {
                  ElMessage.success(res.message);
                  this.closeDialog();
                  this.$emit("changeDrug", false);
                }
              });
          }
        });
      } else if (this.dialogObj.editResidentsTitle == "编辑") {
        this.$refs.ruleFormRef.validate((valid) => {
          if (valid) {
            let repDate = { ...this.ruleForm };
            http.post("/doctor/updateFollow", repDate).then((res) => {
              if (res.code == 200) {
                ElMessage.success(res.message);
                this.closeDialog();
                this.$emit("changeDrug", false);
              }
            });
          }
        });
      }
    },
  },
  watch: {
    dialogObj: {
      handler(newVal, oldVal) {
        if (newVal.editResidentsTitle !== "编辑") {
          this.ruleForm = {};
        } else {
          this.ruleForm = { ...newVal.DialogDate };
          // this.id=newVal.DialogDate.id
          // this.ruleForm.name=newVal.DialogDate.name;
          // this.ruleForm.followName=newVal.DialogDate.followName;
        }
      },
      deep: true, // 深度监听，确保对象内部属性的变化也能被监听到
    },
  },
  mounted() {},
};
</script>

<style scoped>
.residents-container {
  box-sizing: border-box;
  -ms-overflow-style: none !important; /* 适用于IE和Edge */
  scrollbar-width: none !important; /* 适用于Firefox */
}
.res-add-content {
  overflow-y: auto;
  box-sizing: border-box;
  -ms-overflow-style: none !important; /* 适用于IE和Edge */
  scrollbar-width: none !important; /* 适用于Firefox */
}
.res-add-content::-webkit-scrollbar {
  display: none !important;
}

.ml20 {
  margin-left: 25px;
}
.flex {
  display: flex;
}
.el-radio.is-bordered {
  padding: 0 50px 0 50px;
  height: 32px;
}
.shell {
  width: 100%;
  border: 1px solid #ccc;
}
:deep(.el-checkbox-group) {
  display: flex;
  flex-wrap: wrap;
}
:deep(.el-checkbox) {
  margin-right: 18px;
}
:deep(.el-input-group__append) {
  width: 52px;
}
/* :deep(.el-checkbox__inner) {
  border-radius: 50%;
} */
:deep(.el-dialog__header) {
  background-color: #016dff;
  margin: 0;
  height: 30px;
  margin-bottom: 30px;
}
:deep(.el-dialog__title) {
  color: #fff;
}
:deep(.el-dialog__headerbtn .el-dialog__close) {
  color: #fff;
  font-size: 30px;
}
:deep(.el-form-item--large .el-form-item__content) {
  margin-left: 0 !important;
}
.title_box {
  width: 150px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border: 1px solid #000;
  background-color: #ccc;
}
.iconBox {
  font-size: 25px;
  /* position: absolute;
  right: 168px;
  top: 68px; */
  cursor: pointer;
  margin-left: 15px;
}
.flexBox {
  display: flex;
  margin-bottom: 20px;
}
.flexB {
  display: flex;
  justify-content: end;
}
.bing {
  padding-left: 174px;
}
.tip {
  font-size: 12px;
  color: red;
  z-index: 9;
}
.mb20 {
  margin-bottom: 20px;
}
</style>
